<!--
 * @Author: yuqy
 * @Date: 2023-01-13 14:21:44
 * @LastEditors: yuqy
 * @LastEditTime: 2023-10-24 15:49:39
 * @Descripttion: -
-->
<template>
  <div class="video_list_wrap">
    <div class="list" v-for="user in sreenUserList" :key="user.uid" @click="show = !show">
      <div class="list_attr">
        <div class="list_attr_lable">{{user.schoolName}} - {{ user.name || user.phone }}</div>
        <div class="list_btn_wrap">
          <!-- 主动终止某个用户互动并将用户清出房间 -->
          <Icon type="md-trash" v-if="showLiveing" @click="isSetUserOut(user)"/>
          <!-- 主讲老师，主动指定某个用户发言 -->
          <Icon v-if="!user.isAudio" type="md-megaphone" @click="isSetUserSay(user)"/>
          <!-- 发言中 -->
          <Icon v-if="user.isAudio" type="md-mic" class="color_red" @click="isNotAllowSay(user)"/>
          <!-- 申请发言 -->
          <Icon
            v-if="user.isApplySpeak"
            type="md-mic"
            class="ani_color"
            @click="isAllowSay(user, user)"
          />
          <!-- 未发言，未禁止发言 -->
          <Icon v-if="!user.isApplySpeak && !user.isAudio && !user.isNotSay" type="md-mic"/>
          <!-- 禁言中 -->
          <Icon v-if="user.isNotSay" type="md-mic-off" @click="isNotCancel(user, user)"/>
          <!-- 是否全屏展示 -->
          <Icon type="md-expand" v-if="!user.isfull && hasSecondScreen" @click="isSet(user)"/>
          <Icon
            type="md-contract"
            style="color: red;"
            v-if="user.isfull && hasSecondScreen"
            @click="isSet(user)"
          />
          <SVGs
            style="vertical-align: middle;margin-left: 4px;width: 2.5rem;"
            :level="user.NetworkQuality.uplinkNetworkQuality"
            v-if="user.NetworkQuality"
          />
        </div>
      </div>

      <!-- 展示用户视频播放状态 -->
      <div class="list_status">
        <h2>
          <Icon
            type="md-happy"
            style="font-size: 48px;color: #fe6400;"
            v-if="user.playStatus == 1"
          />
          <Icon type="md-sad" style="font-size: 48px;color: #fe6400;" v-else/>
          {{ playStatus[user.playStatus] || "未获取到视频流~" }}
        </h2>
      </div>
      <!-- // 展示用户视频 -->
      <div
        class="list_video lister_list_video"
        @click="isSet(user)"
        :id="'homeSpeaker_live_video' + user.uid"
      />
      <!-- 正在请求发言 -->
      <!-- v-if="user.isApplySpeak" -->
      <transition
        leaveActiveClass="animate__fast animate__animated animate__fadeOut"
        enterActiveClass="animate__fast animate__animated animate__fadeIn"
        name="transition"
      >
        <div class="apply_speak_wrap" v-if="show">
          <div class="apply_speak_inner">
            <h2>
              该用户正在申请发言
              <br>是否允许?
            </h2>
            <div class="apply_btn">
              <div @click="isAllowSayNo(user, '3')" v-ripple>拒绝</div>
              <div @click="isAllowSayNo(user, '2')" v-ripple>允许</div>
            </div>
          </div>
        </div>
      </transition>
    </div>

    <div class="list" v-for="index in (4 - sreenUserList.length)" :key="index">
      <div class="list_video_" :style="'text-align: center;'">
        <Icon type="ios-videocam" class="list_video_videocam"/>
      </div>
    </div>
  </div>
</template>
<script>
/* eslint-disable */
import { mapState } from "vuex";
import SVGs from "@/components/icon/svg.vue";
import { Icon } from "view-ui-plus";
import util from "@/libs/util";
export default {
  name: "userList",
  components: {
    SVGs,
    Icon
  },
  computed: {
    ...mapState({
      showLiveing: state => state.user.showLiveing, // 是否开启了直播
      sreenUserList: state => state.roomAgora.sreenUserList,
    })
  },
  props: {
    list: {
      type: Array,
      default: () => {
        return [];
      }
    },
    hasSecondScreen: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      show: false,
      playStatus: {
        "1": "视频获取中~~",
        "404": "无可用媒体设备~~",
        "403": "视频没有了~~",
        "401": "未获取到视频流~",
        "101": "该听众未进入课堂~~"
      }
    };
  },
  mounted() {},
  created() {},
  destroyed() {},
  methods: {
    isSetUserSay(user) {
      this.$emit("isSetUserSay", user);
    },
    isNotAllowSay(user) {
      this.$emit("isNotAllowSay", user);
    },
    isAllowSay(user) {
      this.$emit("isAllowSay", user);
    },
    isNotCancel(user) {
      this.$emit("isNotCancel", user);
    },
    isSet({ uid, isfull }) {
      let list = util.getDeepObg(this.sreenUserList).map(s => {
        s.isfull = false;
        if (uid == s.uid) s.isfull = !isfull;
        return s
      });
      this.$store.commit('roomAgora/updateSreenUser', list);
      this.$emit("isSet");
    },
    isAllowSayNo(user, type) {
      this.$emit("isAllowSayNo", { user, type });
    },
    isSetUserOut(user) {
      this.$emit("isSetUserOut", user);
    }
  }
};
</script>

<style lang="less" scoped >
.video_list_wrap {
  display: flex;
  flex-direction: column;
  flex: 1;
  margin-top: 10px;
  .list {
    margin-bottom: 10px;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(84, 84, 84, 1);
    height: 25%;
    &:nth-last-child(1) {
      margin-bottom: 0;
    }
    .list_attr {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      color: #fff;
      padding: 4px 0 2px 6px;
      z-index: 999;
      text-shadow: 2px 2px 10px #000;
      background: rgba(133, 133, 133, 0.28);
      span {
        div {
          padding: 0;
        }
      }
      div {
        padding: 0 5px;
        .ivu-icon {
          margin-left: 10px;
          font-size: 16px;
          &:active {
            opacity: 0.55;
          }
        }
        .color_red {
          color: red;
        }
      }
    }
    .list_video_ {
      background: rgba(84, 84, 84, 1);
      overflow: hidden;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      .list_video_videocam{
        font-size: 64px;
        color: #fff;
      }
    }
    .list_video {
      overflow: hidden;
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      border-radius: 10px;
      & > div {
        background: rgba(84, 84, 84, 1);
      }
    }
    .list_status {
      position: absolute;
      width: 100%;
      height: 50px;
      color: #fff;
      top: 0;
      left: 0;
      bottom: 0;
      margin: auto;
      h2 {
        color: #fff;
        text-align: center;
        font-size: 12px;
        font-weight: 400;
      }
      img {
        display: block;
        width: 50px;
        margin: 0 auto 10px;
      }
      h3 {
        text-align: center;
      }
    }
  }
}

.apply_speak_wrap {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0%;
  left: 0%;
  background: rgba(0, 0, 0, 0.57);
  z-index: 9999;
  // border: 1px solid #fff;
  border-radius: 10px;
  .apply_speak_inner {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
  }
  h2 {
    display: block;
    text-align: center;
    font-size: 14px;
    color: #fff;
    font-weight: 500;
    padding: 20px 0 0;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .apply_btn {
    color: #fff;
    display: flex;
    border-top: 1px solid #fff;
    width: 100%;
    margin: auto;
    div {
      font-size: 14px;
      width: 50%;
      text-align: center;
      padding: 10px 0;
      &:active {
        // background-color: rgba(254, 100, 0, 0.35);
        text-shadow: 0px 0px 10px @mainColor;
        opacity: 0.55;
      }
      &:nth-last-child(1) {
        color: @mainColor;
        border-left: 1px solid #fff;
      }
    }
  }
}
</style>
